<template>
  <div class="ranklist-detail">
    <div class="player">
      <van-icon name="arrow-left" @click="goBack" />
      <img :src="rankInfo.picUrl" alt="">
      <span>{{ rankInfo.title }}</span>
      <span>{{ rankInfo.titleDetail }}</span>
      <span>更新时间：{{ updataTime }}</span>
    </div>
    <div class="ranklist">
      <ul>
        <li v-for="(item,id) in rankList" :key="item.id" @click="selectSong(item)">
          <span>{{ id+1 }}&nbsp;{{ item.title }}</span>
          <span>{{ item.rankValue }}&nbsp;{{ item.singerName }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
    data(){
      return{
        rankList:[],
        rankInfo:{},
        updataTime:""
      }
    },
    created(){
        this.getData()
    },
    methods:{
        getData(){
            axios.get("/jsososo/top",{
                params:{
                    id:this.$route.params.id,
                }
            })
            .then(res => {
                console.log(res.data)
                this.rankList=res.data.data.list
                this.rankInfo=res.data.data.info
                this.updataTime=res.data.data.update
            })
            .catch(err => {
                console.error(err); 
            })
        },
        goBack() {
          this.$router.go(-1);
        },
        selectSong(item){
            const id = item.mid;
            this.$router.push({path:`/player/${id}`})
            this.$store.commit('setSinger',item)
        },
    }
}
</script>

<style scoped>
.player img{
  width: 50%;
  border-radius:1rem;
  margin-top: 10px;
}
.van-icon{
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 999;
  font-size: 40px;
    }
.player span{
  display: block;
}
.player>span:nth-of-type(1){
  font-size: 20px;
  margin-top: 15px;
}
.player>span:nth-of-type(2){
  font-size: 18px;
  margin-top: 10px;
}
.player>span:nth-of-type(3){
  font-size: 16px;
  margin-top: 10px;
  color: green;
}
.ranklist li{
  text-align: left;
  margin: 10px 20px;
  
}
.ranklist span{
  display: block;
}
.ranklist>ul>li>span:nth-of-type(1){
  margin-left: 5px;
  font-size: 18px;
  display: block;
  font-weight: 450;/**字体加粗 */
  overflow: hidden; /*文本超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
  width: 250px;/**范围 */
  white-space: nowrap; /*超出的空白区域不换行*/ 
}
.ranklist>ul>li>span:nth-of-type(2){
  font-size: 10px;
  color: grey;
  font-weight: 250;/**字体加粗 */
}
</style>